<!-- 用户地址管理 -->
<template>
  <page-header-wrapper>
    <a-card class="table-card">
      <gz-official-account-list v-model:value="officialAccount" :type="1">
        <GzSearchForm :searchFunc="searchFunc" :resetFunc="() => { searchData = {} }" searchConditionNum="6">
          <!-- <GzTextUp placeholder="昵称" v-model:value="searchData['nickName']" /> -->
          <GzTextUp v-model:value="searchData['phone']" placeholder="手机号码" />
        <!-- <GzTextUp placeholder="商户号" v-model:value="searchData['mchNo']" /> -->
        </GzSearchForm>
        <!-- 列表渲染 -->
        <GzTable
          ref="infoTableRef"
          :init-data="true"
          :req-table-data-func="reqTableDataFunc"
          :table-columns="tableColumns"
          :search-data="searchData"
        >
          <template #bodyCell="{ column, record }">
            <template v-if="column.key === 'feedbackMedia01'">
              <a-image v-if="record.feedbackMedia01&&!isVideoUrl(record.feedbackMedia01)" :src="record.feedbackMedia01" style="width: 80px;" />
              <a v-if="isVideoUrl(record.feedbackMedia01)" :href="record.feedbackMedia01" target="_blank" rel="noopenner noreferrer">{{ record.feedbackMedia01 }}</a>
            </template>
            <template v-if="column.key === 'feedbackMedia02'">
              <a-image v-if="record.feedbackMedia02&&!isVideoUrl(record.feedbackMedia02)" :src="record.feedbackMedia02" style="width: 80px;" />
              <a v-if="isVideoUrl(record.feedbackMedia02)" :href="record.feedbackMedia02" target="_blank" rel="noopenner noreferrer">{{ record.feedbackMedia02 }}</a>
            </template>
            <template v-if="column.key === 'feedbackMedia03'">
              <a-image v-if="record.feedbackMedia03&&!isVideoUrl(record.feedbackMedia03)" :src="record.feedbackMedia03" style="width: 80px;" />
              <a v-if="isVideoUrl(record.feedbackMedia03)" :href="record.feedbackMedia03" target="_blank" rel="noopenner noreferrer">{{ record.feedbackMedia03 }}</a>
            </template>
            <template v-if="column.key === 'operation'">
              <a-button v-if="$access('ENT_FANS_FEEDBACK_REPLY') && !record.feedbackReply" type="link" @click="addOrEditFunc(record)">回复</a-button>
            </template>
          </template>
        </GzTable>
      </gz-official-account-list>
    </a-card>
    <AddOrEdit ref="addOrEditRef" :callBackFunc="searchFunc" />
  </page-header-wrapper>
</template>

<script lang="ts" setup>
import {$apiLiteFeedback} from '@/api/fansManage/userComplain/index'
import AddOrEdit from './AddOrEdit.vue'
import { ref, reactive,watch, getCurrentInstance } from 'vue'

const { $infoBox, $access } = getCurrentInstance()!.appContext.config.globalProperties

const infoTableRef = ref()
const addOrEditRef = ref()
const officialAccount = ref(null)

// liteFeedbackId 主键
// fansId 用户ID
// fansName 用户昵称
// phone 手机号
// appId 应用appid
// appName 应用名称
// feedbackText 用户反馈文本内容
// feedbackMedia01 用户反馈图片/视频路径1
// feedbackMedia02  用户反馈图片/视频路径2
// feedbackMedia03 用户反馈图片/视频路径3
// createdAt 创建时间

let tableColumns = reactive([
  { key: 'fansId', title: '用户ID', dataIndex: 'fansId', fixed: 'left',width: 80, minWidth: 80, maxWidth: 140,  },
  { key: 'fansName', title: '昵称', dataIndex: 'fansName',width: 100, minWidth: 100, maxWidth: 140,  },
  { key: 'phone', title: '手机号', dataIndex: 'phone',width: 140, minWidth: 140, maxWidth: 250,  },
  { key: 'appId', title: '应用appid', dataIndex: 'appId',width: 140, minWidth: 140, maxWidth: 250,  },
  { key: 'appName', title: '应用名称', dataIndex: 'appName',width: 140, minWidth: 140, maxWidth: 250,  },
  { key: 'feedbackText', title: '用户反馈内容', dataIndex: 'feedbackText',width: 140, minWidth: 140, maxWidth: 250,  },
  { key: 'feedbackMedia01', title: '用户反馈图片/视频1', dataIndex: 'feedbackMedia01',width: 170, minWidth: 170, maxWidth: 250,  },
  { key: 'feedbackMedia02', title: '用户反馈图片/视频2', dataIndex: 'feedbackMedia02',width: 170, minWidth: 170, maxWidth: 250,  },
  { key: 'feedbackMedia03', title: '用户反馈图片/视频3', dataIndex: 'feedbackMedia03',width: 170, minWidth: 170, maxWidth: 250,  },
  { key: 'createdAt', title: '创建时间', dataIndex: 'createdAt',width: 140, minWidth: 140, maxWidth: 250,  },
  { key: 'operation', title: '操作',dataIndex: 'operation',width: 140, minWidth: 140, maxWidth: 250,  }

])

watch(()=>officialAccount.value, (newVal, oldVal) => {
  
  if(!oldVal) return
  console.log(newVal,111111)
  // searchData.value.agentNo = newVal.agentNo
  infoTableRef.value.refTable(true)
})

  // 新增OR修改
  function addOrEditFunc(record:any){
    addOrEditRef.value.show(record.liteFeedbackId)
  }

  // function searchFunc() {
  //   infoTableRef.value.refTable(true)
  // }

// 判断链接是否是视频
const isVideoUrl = (url) => {
  const videoRegex = /\.(mp4|webm|mov|avi|wmv|flv|mkv|mpeg|mpg|3gp|m4v)(\?.*)?$/i
  return videoRegex.test(url)
}


const searchData: any = ref({})
// 请求table接口数据
function reqTableDataFunc(params: any) {
  return $apiLiteFeedback({ ...params,appId:officialAccount?.value?.appId })
}
// 搜索
function searchFunc() {
  infoTableRef.value.refTable(true)
}
</script>